import React from 'react';
import { Button, Tooltip, message } from 'antd';
import  { CopyOutlined } from '@ant-design/icons';

const PowerShow = ({ cleartextPwd  }: { cleartextPwd : string | null }) => {
  const copyToClipboard = async () => {
    try {
      if (navigator.clipboard) {
        // 现代浏览器支持的 clipboard API
        await navigator.clipboard.writeText(cleartextPwd as string || '');
        message.success('复制成功！');
      } else {
        // 旧版浏览器使用 execCommand
        const textArea = document.createElement('textarea');
        textArea.value = cleartextPwd as string || '';
        document.body.appendChild(textArea);
        textArea.select();
        document.execCommand('copy');
        document.body.removeChild(textArea);
        message.success('复制成功！');
      }
    } catch (err) {
      message.error('复制失败，请手动复制！');
    }
  };

  return (
    <div style={{ display: 'flex', alignItems: 'center', margin: '20px 0' }}>
      <p style={{ marginRight: '20px' }}>
        明文密码：
      </p>
      <input
        type="text"
        value={cleartextPwd as string}
        readOnly
        style={{
          color: 'red',
          borderColor: 'red',
          borderStyle: 'dashed',
          borderWidth: '1px',
          padding: '5px',
          marginRight: '20px',
        }}
      />
      <Tooltip title="复制">
      <Button
          onClick={copyToClipboard}
          icon={<CopyOutlined />}
          type="link"
        />
      </Tooltip>
    </div>
  );
};

export default PowerShow;